<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>视频播放</title>
    <style>
      #output > img {
        width: 100%;
      }
      #video {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <video id="video" controls="controls">
        <source src="img/video2.MP4" />
      </video>
      <div id="output"></div>
    </div>
    <script>
      ;(function() {
        var video, output
        var scale = 0.8
        var initialize = function() {
          output = document.getElementById('output')
          video = document.getElementById('video')
          video.addEventListener('loadeddata', captureImage)
        }

        var captureImage = function() {
          var canvas = document.createElement('canvas')
          canvas.width = video.videoWidth * scale
          canvas.height = video.videoHeight * scale
          canvas
            .getContext('2d')
            .drawImage(video, 0, 0, canvas.width, canvas.height)

          var img = document.createElement('img')
          img.src = canvas.toDataURL('image/png')
          output.appendChild(img)
        }

        initialize()
      })()

      function getVideoBase64(url) {
        return new Promise(function(resolve, reject) {
          var dataUrl = ''
          var video = document.createElement('video')
          video.setAttribute('crossOrigin', 'anonymous')
          video.setAttribute('src', url)
          video.addEventListener('loadeddata', function() {
            var canvas = document.createElement('canvas'),
              width = (canvas.width = video.width),
              height = (canvas.height = video.height)
            canvas.getContext('2d').drawImage(video, 0, 0, width, height)
            dataURL = canvas.toDataURL('image/png')
            resolve(dataURL)
          })
        })
      }

      function getImgBase64(url) {
        return new Promise(function(resolve, reject) {
          var Img = new Image()
          var dataUrl = ''
          Img.src = url
          Img.onload = function() {
            var canvas = document.createElement('canvas'),
              width = (canvas.width = Img.width),
              height = (canvas.height = Img.height)
            canvas.getContext('2d').drawImage(Img, 0, 0, width, height)
            dataURL = canvas.toDataURL('image/png')
            resolve(dataURL)
          }
        })
      }
    </script>
  </body>
</html>
